<html>
<head>
    <title>game select</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link type="text/css" rel="Stylesheet" href="../css/game-select.css"/>
    <script type="text/javascript" src="../js/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="../js/db.js"></script>
    <!--<link type="text/css" rel="Stylesheet" href="../css/game01.css"/>-->
    <!--<link type="text/css" rel="Stylesheet" href="../css/game03.css"/>-->
    <!--<link type="text/css" rel="Stylesheet" href="../css/game04.css"/>-->
    <link type="text/css" rel="Stylesheet" href="../css/game05.css"/>
</head>
<body>
<div id="wrap">
    <div id="game-0">
        <div id="logo">
            <img src="../images/image_0014_TNT.png">
        </div>
        <div id="game-content">
            <div class="screen01" style="">
                <img style="position: absolute; display: none; top: 0; right: 0;" src="images/trend__0000_Layer-4-copy.png">
                <a href="#"><div class="button-continue"></div></a>
            </div>

            <div class="screen02" style="display: none;">
                <div class="question-number"></div>
                <div class="two-column">
                    <div class="column-1">

                    </div>

                    <div class="vertical-line">
                        <img src="images/trend__0000_Shape-9.png">
                    </div>

                    <div class="column-2">

                    </div>
                </div>

            </div>

            <div class="screen05" style="display: none;">
                <div class="title-welcome">XIN MỜi Đội 1 vào vòng trong</div>
                <a href="#"><div class="button-welcome">vòng 1 lượt 2<br>
                    đội 3, 4</div></a>
            </div>
        </div>

        <script type="text/javascript">
            var stepQuestion = 0;
            var count = 0;
            var turn = 0;
            var groupQuestion = game05[turn];
            var buttonStatus = "showResult";
            var currentQuestion = groupQuestion[stepQuestion];
            var countTrueAnswerTeam1 = 0;
            var countTrueAnswerTeam2 = 0;
            var currentTeam1 = "đội 1";
            var currentTeam2 = "đội 2";
            var currentCountTrueTeam1 = 0;
            var currentCountTrueTeam2 = 0;

            function loadQuestion(_currentQuestion){
                $(".screen01").show();
                $(".screen02").hide();
//                $(".column-1 div").remove();
//                $(".column-2 div").remove();
                $(".number-sentence, .question, .list-answer", ".screen01").remove();
                $(".screen01").append('<div class="number-sentence">câu số ' + _currentQuestion.topic + '</div>' +
                        '<div class="question">' + _currentQuestion.question + '</div>' +
                        '<div class="list-answer">' +
                        '<div class="answer-item">' +
                        '<div class="left">A.</div>' +
                        '<div class="right">' + _currentQuestion.answer1 + '</div>' +
                        '</div>' +
                        '<div class="answer-item">' +
                        '<div class="left">B.</div>' +
                        '<div class="right">' + _currentQuestion.answer2 + '</div>' +
                        '</div>' +
                        '<div class="answer-item">' +
                        '<div class="left">C.</div>' +
                        '<div class="right">' + _currentQuestion.answer3 + '</div>' +
                        '</div>' +
                        '<div class="answer-item">' +
                        '<div class="left">D.</div>' +
                        '<div class="right">' + _currentQuestion.answer4 + '</div>' +
                        '</div>' +
                        '<div class="answer-item">' +
                        '<div class="left">E.</div>' +
                        '<div class="right">' + _currentQuestion.answer5 + '</div>' +
                        '</div>' +
                        '</div>');

            }

            function loadAnswer(_currentQuestion, _turn){
                $(".screen02").show();
                $(".number-sentence", ".question-number").remove();
                $(".question-number", ".screen02").append('<div class="number-sentence"> câu số ' + _currentQuestion.topic + '</div>');
                $(".column-1 div").remove();
                $(".column-2 div").remove();
                    $(".column-1").append('<div class="team-1">' + currentTeam1 +'</div>' +
//                            '<div class="title-result">Chúc mừng đội 1<br>đã trả lời đúng<br>3 trên 5 câu</div>' +
                            '<div class="list-answer1">' +
                            '<div class="answer-item">' +
                            '<div class="left">' +
                            '<div class="item none-check"></div>' +
                            '</div>' +
                            '<div class="right">A. ' + _currentQuestion.answer1 +' <span>' + _currentQuestion.volume1 + '</span></div>' +
                            '</div>' +
                            '<div class="answer-item">' +
                            '<div class="left">' +
                            '<div class="item none-check"></div>' +
                            '</div>' +
                            '<div class="right">B. ' + _currentQuestion.answer2 +' <span>' + _currentQuestion.volume2 + '</span></div>' +
                            '</div>' +
                            '<div class="answer-item">' +
                            '<div class="left">' +
                            '<div class="item none-check"></div>' +
                            '</div>' +
                            '<div class="right">C. ' + _currentQuestion.answer3 +' <span>' + _currentQuestion.volume3 + '</span></div>' +
                            '</div>' +
                            '<div class="answer-item">' +
                            '<div class="left">' +
                            '<div class="item none-check"></div>' +
                            '</div>' +
                            '<div class="right">D. ' + _currentQuestion.answer4 +' <span>' + _currentQuestion.volume4 + '</span></div>' +
                            '</div>' +
                            '<div class="answer-item">' +
                            '<div class="left">' +
                            '<div class="item none-check"></div>' +
                            '</div>' +
                            '<div class="right">E. ' + _currentQuestion.answer5 +' <span>' + _currentQuestion.volume5 + '</span></div>' +
                            '</div><a href="#"><div class="button-back"></div></a>' +
                            '</div>'
                    );

                    $(".column-2").append('<div class="team-2">' + currentTeam2 +'</div>' +
//                            '<div class="title-result">Chúc mừng đội 1<br>đã trả lời đúng<br>3 trên 5 câu</div>' +
                            '<div class="list-answer1">' +
                            '<div class="answer-item">' +
                            '<div class="left">' +
                            '<div class="item none-check"></div>' +
                            '</div>' +
                            '<div class="right">A. ' + _currentQuestion.answer1 +' <span>' + _currentQuestion.volume1 + '</span></div>' +
                            '</div>' +
                            '<div class="answer-item">' +
                            '<div class="left">' +
                            '<div class="item none-check"></div>' +
                            '</div>' +
                            '<div class="right">B. ' + _currentQuestion.answer2 +' <span>' + _currentQuestion.volume2 + '</span></div>' +
                            '</div>' +
                            '<div class="answer-item">' +
                            '<div class="left">' +
                            '<div class="item none-check"></div>' +
                            '</div>' +
                            '<div class="right">C. ' + _currentQuestion.answer3 +' <span>' + _currentQuestion.volume3 + '</span></div>' +
                            '</div>' +
                            '<div class="answer-item">' +
                            '<div class="left">' +
                            '<div class="item none-check"></div>' +
                            '</div>' +
                            '<div class="right">D. ' + _currentQuestion.answer4 +' <span>' + _currentQuestion.volume4 + '</span></div>' +
                            '</div>' +
                            '<div class="answer-item">' +
                            '<div class="left">' +
                            '<div class="item none-check"></div>' +
                            '</div>' +
                            '<div class="right">E. ' + _currentQuestion.answer5 +' <span>' + _currentQuestion.volume5 + '</span></div>' +
                            '</div><a href="#"><div class="button-result">kết quả câu ' + _currentQuestion.topic + '</div></a>' +
                            '</div>'
                    );

                $(".button-back", ".screen02").click(function(){
                    loadQuestion(_currentQuestion);
                    $(".screen02").hide();
                    countTrueAnswerTeam1 = countTrueAnswerTeam1 - currentCountTrueTeam1;
                    countTrueAnswerTeam2 = countTrueAnswerTeam2 - currentCountTrueTeam2;
                })

                canCheck(true);
                $(".left div").each(function(index, _item){
                    $(_item).addClass("focus");
                });
            }

            function process(){
                switch (buttonStatus){
                    case 'showResult':
//                        $(".button-result", ".screen02").show();
                        $(".right", ".column-1").each(function(index, _item){
                            var item = $(_item);
                            if(currentQuestion.result1 == index + 1 || currentQuestion.result2 == index + 1 || currentQuestion.result3 == index + 1)
                            {
                                item.addClass("true");
                            }
                            $("span", item).show();
                        });

                        $(".right", ".column-2").each(function(index, _item){
                            var item = $(_item);
                            if(currentQuestion.result1 == index + 1 || currentQuestion.result2 == index + 1 || currentQuestion.result3 == index + 1)
                            {
                                    item.addClass("true");
                            }
                            $("span", item).show();
                        });

                        $(".left div", ".column-1").each(function(index, _item){
                            var item = $(_item);
                            if(item.hasClass("checked"))
                            {
                                if(currentQuestion.result1 != index + 1 && currentQuestion.result2 != index + 1 && currentQuestion.result3 != index + 1)
                                {
                                    item.removeClass("checked");
                                    item.removeClass("none-check");
                                    item.addClass("false");
                                    $(".right", ".column-1").each(function(index1, _item1){
                                        if(index == index1)
                                            $(this).addClass("false-background");
                                    });
                                }
                                else
                                {
                                    countTrueAnswerTeam1++;
                                    currentCountTrueTeam1++;
                                }
                            }
                        });

                        $(".left div", ".column-2").each(function(index, _item){
                            var item = $(_item);
                            if(item.hasClass("checked"))
                            {
                                if(currentQuestion.result1 != index + 1 && currentQuestion.result2 != index + 1 && currentQuestion.result3 != index + 1)
                                {
                                    item.removeClass("checked");
                                    item.removeClass("none-check");
                                    item.addClass("false");
                                    $(".right", ".column-2").each(function(index1, _item1){
                                        if(index == index1)
                                            $(this).addClass("false-background");
                                    });
                                }
                                else
                                {
                                    countTrueAnswerTeam2++;
                                    currentCountTrueTeam2++;
                                }
                            }
                        });

                        canCheck(false);
                        $(".left div").each(function(index, _item){
                            $(_item).removeClass("focus");
                        });

                        buttonStatus = "newQuestion";
                        break;

                    case 'newQuestion':
                        stepQuestion++;
                        currentCountTrueTeam1 = 0;
                        currentCountTrueTeam2 = 0;
                        if(stepQuestion < groupQuestion.length){
                            groupQuestion = game05[turn];
                            currentQuestion = groupQuestion[stepQuestion];
                            loadQuestion(currentQuestion);
                        }
                        else{
                            buttonStatus = "continueInside";
                            Statistic(groupQuestion);
                        }
                        break;

                    case 'continueInside':
                        buttonStatus = "round1Turn2";
//                            alert(turn);
                            if(turn == 0){
                                if(countTrueAnswerTeam1 > countTrueAnswerTeam2){
                                    $(".title-welcome", ".screen05").remove();
                                    $(".screen05").append('<div class="title-welcome">XIN MỜi Đội 1 vào vòng trong</div>');
                                }
                                else{
                                    if(countTrueAnswerTeam1 < countTrueAnswerTeam2){
                                        $(".title-welcome", ".screen05").remove();
                                        $(".screen05").append('<div class="title-welcome">XIN MỜi Đội 2 vào vòng trong</div>');
                                    }
                                    else{
                                        $(".title-welcome", ".screen05").remove();
                                        $(".screen05").append('<div class="title-welcome">kết quả hòa</div>');
                                    }
                                }
                            }
                            else{
                                if(turn == 1){
                                    if(countTrueAnswerTeam1 > countTrueAnswerTeam2){
                                        $(".title-welcome, a", ".screen05").remove();
                                        $(".screen05").append('<div class="title-welcome">XIN MỜi Đội 1 vào vòng trong</div><a href="#"><div class="button-welcome">vòng 2</div></a>');
                                    }
                                    else{
                                        if(countTrueAnswerTeam1 < countTrueAnswerTeam2){
                                            $(".title-welcome", ".screen05").remove();
                                            $(".screen05").append('<div class="title-welcome">XIN MỜi Đội 2 vào vòng trong</div>');
                                        }
                                        else{
                                            $(".title-welcome", ".screen05").remove();
                                            $(".screen05").append('<div class="title-welcome">kết quả hòa</div>');
                                        }
                                    }
                                    $("a", ".screen05").remove();
                                    $(".screen05").append('<a href="#"><div class="button-welcome">vòng 2</div></a>');
                                    $(".button-welcome", ".screen05").click(function(){
                                        process();
                                    });
                                }else{
                                    if(countTrueAnswerTeam1 > countTrueAnswerTeam2){
                                        $(".title-welcome", ".screen05").remove();
                                        $(".screen05").append('<div class="title-welcome">chúc mừng '+ currentTeam1 +'</div>');
                                    }
                                    else{
                                        if(countTrueAnswerTeam1 < countTrueAnswerTeam2){
                                            $(".title-welcome", ".screen05").remove();
                                            $(".screen05").append('<div class="title-welcome">chúc mừng '+ currentTeam2 +'</div>');
                                        }
                                        else{
                                            $(".title-welcome", ".screen05").remove();
                                            $(".screen05").append('<div class="title-welcome">kết quả hòa</div>');
                                        }
                                    }
                                    $(".button-welcome").hide();
                                    $(".screen05").append('<a href="#"><div class="button-end"></div></a>');
                                    $(".button-end", ".screen05").click(function(){
                                        $(this).hide();
                                        reStart();
                                        loadQuestion(currentQuestion);
                                        $(".screen05").hide();
                                        $(".button-welcome", ".screen05").show();

                                        $("a", ".screen05").remove();
                                        $(".screen05").append('<a href="#"><div class="button-welcome">vòng 1 lượt 2<br>đội 3, 4</div></a>');
                                        $(".button-welcome", ".screen05").click(function(){
                                            process();
                                        });
                                    });
                                }

                            }

                        $(".screen05").show();
                        $(".screen02").hide();
                        break;

                    case 'round1Turn2':
                        turn++;
                        if(turn == 1){
                            stepQuestion = 0;
                            groupQuestion = game05[turn];
                            currentQuestion = groupQuestion[stepQuestion];
                            loadQuestion(currentQuestion);
                            currentTeam1 = "đội 3";
                            currentTeam2 = "đội 4";
                            countTrueAnswerTeam1 = 0;
                            countTrueAnswerTeam2 = 0;
                            $(".screen05").hide();
                            $(".screen01").show();
                        }
                        else{
                            if(turn == 2){
                                stepQuestion = 0;
                                groupQuestion = game05[turn];
                                currentQuestion = groupQuestion[stepQuestion];
                                loadQuestion(currentQuestion);
                                currentTeam1 = "đội a";
                                currentTeam2 = "đội b";
                                countTrueAnswerTeam1 = 0;
                                countTrueAnswerTeam2 = 0;
                                $(".screen05").hide();
                                $(".screen01").show();
                            } else{
                                $(".screen01").show();
                                reStart();
                            }

                        }
                        break;
                }
            }

            function reStart(){
                turn = 0;
                stepQuestion = 0;
                count = 0;
                groupQuestion = game05[turn];
                buttonStatus = "showResult";
                currentQuestion = groupQuestion[stepQuestion];
                countTrueAnswerTeam1 = 0;
                countTrueAnswerTeam2 = 0;
                currentTeam1 = "đội 1"
                currentTeam2 = "đội 2"
            }

            function Statistic(_currentGroup){
                $(".screen02").show();
                $(".column-1 div").remove();
                $(".column-2 div").remove();

                $(".column-1").append('<div class="team-1">' + currentTeam1 +'</div>' +
                        '<div class="title-result">Chúc mừng ' + currentTeam1 +'<br>đã trả lời đúng<br>'+ countTrueAnswerTeam1 +' đáp án trên '+ _currentGroup.length +' câu</div>' +
                        '</div><a href="#"><div class="button-back"></div></a>' +
                        '</div>'
                );

                $(".column-2").append('<div class="team-2">' + currentTeam2 +'</div>' +
                        '<div class="title-result">Chúc mừng ' + currentTeam2 +'<br>đã trả lời đúng<br>'+ countTrueAnswerTeam2 +' đáp án trên '+ _currentGroup.length +' câu</div>' +
                        '</div><a href="#"><div class="button-continue"></div></a>' +
                        '</div>'
                );

                $(".button-continue", ".screen02").click(function(){
                    process();
                });

            }

            function canCheck(_value){
                var checkSelectTeam1 = 0;
                var checkSelectTeam2 = 0;
                if (_value) {
                    $(".left div").click(function () {
                        checkSelectTeam1 = 0;
                        checkSelectTeam2 = 0;
                        if ($(this).hasClass("none-check")) {
                            $(this).removeClass("none-check");
                            $(this).addClass("checked");
                        }
                        else {
                            $(this).removeClass("checked");
                            $(this).addClass("none-check");
                        }
                        $(".left div", ".column-1").each(function (index, _item) {
                                    if ($(_item).hasClass("checked")) {
                                        checkSelectTeam1++;
                                    }
//                                    $(_item).removeClass("focus");
                                }
                        );
                        $(".left div", ".column-2").each(function (index, _item) {
                                    if ($(_item).hasClass("checked")) {
                                        checkSelectTeam2++;
                                    }
//                                    $(_item).removeClass("focus");
                                }
                        );
                        if (checkSelectTeam1 == 3) {
                            if(checkSelectTeam2 == 3){
                                $(".button-result", ".screen02").show();
                            }
                            else{
                                $(".button-result", ".screen02").hide();
                            }
                        }
                        else{
                            $(".button-result", ".screen02").hide();
                        }
                    });
                }
                else
                {
                    $(".left div").off("click");
                }
            }

            $(document).ready(function () {
                loadQuestion(currentQuestion);
                $(".button-continue", ".screen01").click(function(){
                    $(".screen02").show();
                    $(".screen01").hide();
                    loadAnswer(currentQuestion, turn);
                    buttonStatus = "showResult";
                    $(".button-result", ".screen02").click(function(){
                        process();
                    });
                });
                $(".button-welcome", ".screen05").click(function(){
                    process();
                });

            });
        </script>

        <div id="footer-banner">
            <a href="../index.html"><img class="home-icon" src="../images/home_button.png"></a>
            <a href="#"><img class="abbott-icon" src="../images/image_0001_Abbott-logo.png"></a>
            <img src="../images/image_0002_Shape-8.png">
        </div>
    </div>
</div>
</body>
</html>